<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-resize="searchResize">
			<el-form-item label="标题" prop="title">
				<el-input v-model="searchData.title" clearable placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="标签" prop="tags">
				<el-input v-model="searchData.tags" clearable placeholder=""></el-input>
			</el-form-item>
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" size="small" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" size="small" @click="resetClick">重置</el-button>
				<el-button icon="el-icon-plus" type="success" size="small" @click="addShowClick">新增</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格渲染 -->
		<YwTable ref="tableRef" :searchData="searchData" :tableProps="tableProps" api="appQaFindAllByPage">
			<el-table-column slot="table_oper" label="操作">
				<template v-slot="scope">
					<el-button type="text" icon="el-icon-edit" @click="editShowClick(scope.row)">修改</el-button>
					<el-button type="text" icon="el-icon-delete" @click="deleteClick(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</YwTable>

		<!-- 添加/修改 -->
		<YwDialog @confirm="confirmClick" width="800px" ref="ywDialogRef" title="添加/修改">
			<template slot="form">
				<el-form :model="curData" ref="curForm" :show-message="false" label-width="80px">
					<el-form-item label="问题标题" prop="title" required>
						<el-input v-model="curData.title" placeholder="" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="问题标签" prop="tags">
						<el-input v-model="curData.tags" placeholder="如:首页"></el-input>
					</el-form-item>
					<el-form-item label="显示排序" prop="sort" required>
						<el-input v-model="curData.sort" type="number" placeholder="序号越小越靠前" maxlength="6"></el-input>
					</el-form-item>
					<el-row>
						<el-col>
							<el-form-item label="问题内容" prop="content">
								<YwEditor ref="ywEditorRef" rootPath="app/qa" v-model="curData.content"
										></YwEditor>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</template>
		</YwDialog>
		<YwYulan ref="ywYulan"></YwYulan>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				searchData: {
					title: null,
					tags:null,
				},
				tableProps: [
					{
						label: "标题",
						prop: "title"
					},
					{
						label: "内容",
						prop: "content",
						type:"yulan"
					},
					{
						label: "标签",
						prop: "tags"
					},
					{
						label: "排序",
						prop: "sort"
					},
				],
				curData: {
					id: "",
					title: null,
					content: "",
					tags:null,
					sort:null
				},
			};
		},
		mounted() {
			this.searchClick()
		},
		methods: {
			//设置表格高度
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchForm.resetFields();
				this.searchClick()
			},
			//新增
			addShowClick() {
				this.curData.id = ""
				this.curData.title = ""
				this.curData.content = ""
				this.curData.tags = ""
				this.curData.sort = ""
				
				this.$refs.ywDialogRef.open()
			},
			//修改
			editShowClick(row) {
				let data = JSON.parse(JSON.stringify(row))
				this.curData = data
				this.$refs.ywDialogRef.open()
			},
			//添加
			confirmClick(event) {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curForm.validate(async (valid) => {
					if (valid) {
						let res = {}
						data.diqu = JSON.stringify(data.diqu)
						if (this.curData.id == "") {
							res = await this.$api.appQaAdd(data)
						} else {
							res = await this.$api.appQaEdit(data);
						}
						this.$refs.ywDialogRef.close()
						
						this.searchClick()
					}
				});
			},
			//删除
			deleteClick(row) {
				this.$confirm("确定删除?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						this.$api.appQaDelByIds(row.id).then(res => {
							if (res.success) {
								this.$message.success('操作成功');
								this.searchClick();
							}
						});
					})
					.catch(() => {});
			},
		},
	};
</script>

<style lang="scss" scoped>

</style>
